<template>
  <div class="box">
    <hu-card :pb="0" v-show="MixinSelectShow">
      <el-form :model="queryParams" label-width="100px">
        <el-row :gutter="50">
          <el-col :span="6">
            <el-form-item label="部门">
              <el-select
                @change="deptChange"
                v-model="queryParams.deptId"
                placeholder="请选择部门"
              >
                <el-option
                  v-for="dict in dictsList"
                  :key="dict.id"
                  :value="dict.id"
                  :label="dict.name"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="班组">
              <el-select
                v-model="queryParams.groupId"
                :loading="loading"
                @change="changeGroup"
                placeholder="请选择班组"
              >
                <el-option
                  v-for="dict in teamsList"
                  :key="dict.id"
                  :value="dict.id"
                  :label="dict.name"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="班组下人员">
              <el-select
                v-model="queryParams.userId"
                placeholder="请输入名称"
                :loading="loading"
              >
                <el-option
                  v-for="item in teamUserList"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item class="searchFromButton">
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="MixinSearchList"
                >查询</el-button
              >
              <el-button icon="el-icon-refresh-left" @click="MixinResetQuery"
                >重置</el-button
              >
              <cut-is-show :CutisShow.sync="MixinShowSearch"></cut-is-show>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-show="MixinShowSearch" :gutter="50">
          <el-col :span="6">
            <el-form-item label="全部人员搜索">
              <el-select
                v-model="queryParams.leaderId"
                remote
                reserve-keyword
                placeholder="请输入名称"
                :remote-method="MixinRemoteMethodQuery"
                :loading="loading"
              >
                <el-option
                  v-for="item in MixinUserList"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建人">
              <el-input
                v-model="queryParams.cuser"
                placeholder="请输入创建人"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="时间范围">
              <el-date-picker
                v-model="queryParams.ctimeBegin"
                type="daterange"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </hu-card>
    <hu-card>
      <el-row :gutter="10" class="mb10 space_between" type="flex">
        <el-col :span="1.5">
          <el-button type="primary" icon="el-icon-plus" @click="handleAdd"
            >新增</el-button
          >
          <el-button type="success" icon="el-icon-download" @click="exportFile"
            >导出</el-button
          >
          <el-button
            type="danger"
            @click="handleAllDelete"
            icon="el-icon-delete"
            >批量删除</el-button
          >
        </el-col>
        <right-toolbar
          :tableCol.sync="tableCol"
          :showSearch.sync="MixinSelectShow"
          @queryTable="getList"
        ></right-toolbar>
      </el-row>
      <hu-table
        :tableData="tableData"
        :loading="MixinLoading"
        :tableCol="tableCol"
        @selection-change="handleSelectionChange"
      >
        <!-- 文件 -->
        <template v-slot:file="{ row }">
          <!-- 多个文件 -->
          <!-- <HuFileBut
            v-for="(item, index) in row.safetyHealthEnvironmentFiles"
            :key="index"
            :path="item.previewPath"
            :name="item.originalName"
          /> -->
          <!-- 单个文件 -->
          <!-- <HuFileBut
            v-if="row.previewPath"
            :path="row.previewPath"
            :name="row.originalName"
          /> -->
        </template>
        <!-- 图片 -->
        <template v-slot:images="{ row }">
          <!-- 多个图片 -->
          <!-- <span
            style="padding: 0 2px"
            v-for="(item, index) in row.images"
            :key="index"
          >
            <el-image
              v-if="item.headPortraitPath"
              fit="cover"
              class="tent_image"
              :src="$config.imgUrl + item.headPortraitPath"
              :preview-src-list="[$config.imgUrl + item.headPortraitPath]"
            >
            </el-image>
          </span> -->
          <!-- 单个图片 -->
          <!-- <el-image
            v-if="row.headPortraitPath"
            fit="cover"
            class="tent_image"
            :src="$config.imgUrl + row.headPortraitPath"
            :preview-src-list="[$config.imgUrl + row.headPortraitPath]"
          >
          </el-image> -->
        </template>
        <template v-slot:operate="{ row }">
          <el-button type="text" @click="handleUpdate(row, 0)">查看</el-button>
          <el-button type="text" @click="handleUpdate(row, 2)">修改</el-button>
          <el-button type="text" @click="handleDelete(row)">删除</el-button>
        </template>
      </hu-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </hu-card>
    <!--全屏 对话框 -->
    <hu-modal
      title="标题"
      :show-modal.sync="showModal"
      :setLook="MixinSetLook"
      @submit="addFrom"
    >
      <el-form
        ref="formData"
        :model="formData"
        :rules="rulesSon"
        :disabled="MixinSetLook === 0"
        label-width="100px"
      >
        <el-collapse v-model="MixinActiveNames" class="collapse_style">
          <el-collapse-item name="1">
            <template slot="title">
              <div>
                <span class="basic_div"></span
                ><span class="basic_title">基本信息</span>
              </div>
            </template>
            <div class="collapse_style_list">
              <el-row :gutter="50">
                <el-col :span="8">
                  <el-form-item label="标题" prop="title">
                    <el-input
                      v-model="formData.title"
                      placeholder="请输入标题"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="部门" prop="deptId">
                    <el-select
                      @change="deptFormChange"
                      v-model="formData.deptId"
                      placeholder="请选择部门"
                    >
                      <el-option
                        v-for="dict in dictsList"
                        :key="dict.id"
                        :value="dict.id"
                        :label="dict.name"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="班组" prop="groupId">
                    <el-select
                      v-model="formData.groupId"
                      :loading="loading"
                      placeholder="请选择班组"
                    >
                      <el-option
                        v-for="dict in teamsFormList"
                        :key="dict.id"
                        :value="dict.id"
                        :label="dict.name"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="50">
                <el-col :span="8">
                  <el-form-item label="全部人员" prop="testId">
                    <HuUserSelect
                      v-model="formData.testId"
                      placeholder="请选择全部人员"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-collapse-item>
          <el-collapse-item name="2">
            <template slot="title">
              <div>
                <span class="basic_div"></span
                ><span class="basic_title">第二块</span>
              </div>
            </template>
            <div class="collapse_style_list">
              <el-row :gutter="50">
                <el-col :span="8">
                  <el-form-item label="类型" prop="type">
                    <el-select v-model="formData.type" placeholder="请选择类型">
                      <el-option
                        v-for="dict in dict.type.gglx"
                        :key="dict.value"
                        :value="dict.value"
                        :label="dict.label"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="开始日期" prop="deptId">
                    <el-date-picker
                      v-model="formData.beginTime"
                      type="date"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      placeholder="请选择开始日期"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="备注" prop="remark">
                    <el-input
                      v-model="formData.remark"
                      type="textarea"
                      :autosize="{ minRows: 5, maxRows: 10 }"
                      placeholder="请输入备注信息"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-collapse-item>
          <el-collapse-item name="3">
            <template slot="title">
              <div>
                <span class="basic_div"></span
                ><span class="basic_title">第三块</span>
              </div>
            </template>
            <div class="collapse_style_list">
              <el-row :gutter="50">
                <el-col :span="24">
                  <el-form-item label="附件" prop="fileIds">
                    <!-- :limit="1" disabled -->
                    <!-- <f-upload
                  :fileList.sync="formData.fileIds"
                  @remove="removeFile"
                ></f-upload>
                <img-upload
                  :limit="1"
                  :fileList.sync="formData.fileIds"
                  @remove="removeFile"
                ></img-upload> -->
                  </el-form-item></el-col
                >
              </el-row>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-form>
    </hu-modal>
  </div>
</template>
<script>
import * as http from "@/api/模板";
export default {
  name: 'template_test',
  dicts: ["gglx"],
  data() {
    return {
      loading: false,
      showModal: false, // 弹窗
      // list 参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0, // table total
      // table Col
      tableCol: [
        {
          type: "selection",
          width: "55",
        },
        {
          title: "序号",
          type: "index",
          width: "55",
        },
        {
          title: "部门",
          key: "deptName",
        },
        {
          title: "班组",
          key: "groupName",
        },
        {
          title: "名称",
          key: "name",
        },
        {
          title: "文件",
          slot: "file",
          showOverflowTooltip: false, // 是否显示 tooltip
        },
        {
          title: "图片",
          slot: "images",
          showOverflowTooltip: false,
        },
        {
          title: "创建时间",
          key: "ctime",
        },
        {
          title: "创建人",
          key: "cuserName",
        },
        {
          title: "自定义内容",
          function: (item) => {
            return item; // 自定义内容
          },
        },
        {
          title: "操作",
          slot: "operate",
          width: "200",
          fixed: "right",
        },
      ],
      tableData: [], // table Data
      // form Data
      formData: {
        id: undefined,
      },
      // 表单校验 blur
      rulesSon: {
        title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
        type: [{ required: true, message: "类型不能为空", trigger: "change" }],
      },
      ids: [], // table 勾选项
      // 部门
      dictsList: [],
      // 班组
      teamsList: [],
      teamsFormList: [],
      // 班组人员
      teamUserList: [],
    };
  },
  created() {
    this.getDicts();
    this.getList();
  },
  methods: {
    // get 部门
    getDicts() {
      this.$http.getDicts().then(({ result }) => {
        this.dictsList = result;
      });
    },
    // query change 部门
    deptChange() {
      this.$set(this.queryParams, "groupId", undefined);
      this.getTeams();
    },
    // query get 班组
    getTeams() {
      this.loading = true;
      let params = this.queryParams.deptId && [this.queryParams.deptId];
      this.$http.getTeams(params).then(({ result }) => {
        this.loading = false;
        this.teamsList = result;
      });
    },
    // query change 班组
    changeGroup() {
      this.$set(this.queryParams, "userId", undefined);
      this.getTeamUserList();
    },
    // query get 班组人员
    getTeamUserList() {
      return this.$http
        .getTeamUserList([this.queryParams.groupId])
        .then(({ result }) => {
          this.teamUserList = result;
        });
    },
    // 列表 List
    getList() {
      this.MixinLoading = true;
      let params = {
        ...this.queryParams,
        ctimeBegin:
          this.queryParams.ctimeBegin && this.queryParams.ctimeBegin[0],
        ctimeEnd: this.queryParams.ctimeBegin && this.queryParams.ctimeBegin[1],
      };
      http.getList(params).then(({ result }) => {
          this.MixinLoading = false;
          this.tableData = result.records;
          this.total = result.total;
      }).finally(()=>{
        this.MixinLoading = false;
      })
    },
    // change 部门
    deptFormChange() {
      this.$set(this.formData, "groupId", undefined);
      this.getFormTeams();
    },
    // get 班组
    getFormTeams() {
      this.loading = true;
      let params = this.formData.deptId && [this.formData.deptId];
      this.$http.getTeams(params).then(({ result }) => {
        this.loading = false;
        this.teamsFormList = result;
      });
    },
    // 表单重置
    reset() {
      this.MixinSetLook = "";
      this.formData = {
        id: undefined,
      };
      this.resetForm("formData");
    },
    // add 弹出
    handleAdd() {
      this.reset();
      this.MixinSetLook = 1;
      this.showModal = true;
    },
    // Update 弹出
    handleUpdate(row, status) {
      this.reset();
      this.MixinSetLook = status;
      this.formData = {
        id: row.id,
        deptId: row.deptId,
        deptName: row.deptName,
        leaderId: row.leaderId,
        leaderName: row.leaderName,
        remark: row.remark,
      };
      this.getFormTeams()
      this.showModal = true;
    },
    // 删除文件
    removeFile(arr) {
      if (!arr[0].raw) {
        if (!this.formData.removeFileIds) {
          this.formData.removeFileIds = [];
        }
        this.formData.removeFileIds.push(arr[0].id);
      }
    },
    // 提交
    addFrom() {
      this.$refs["formData"].validate((valid) => {
        if (valid) {
          this.$startLoading();
          // 提交 payload
          let params = { ...this.formData };
          // 提交 formData
          /** 
           let params = new FormData();
            Object.keys(this.formData).forEach((e, i) => {
              if (this.formData[e]) {
                if (e === "files") {
                  this.formData[e].forEach((item) => {
                    if (!item.id) {
                      params.append(e, item.raw);
                    }
                  });
                } else {
                  params.append(e, this.formData[e]);
                }
              }
            });
          */
          if (this.formData.id != undefined) {
            http
              .updateList(params)
              .then(() => {
                this.$modal.msgSuccess("修改成功");
                this.showModal = false;
                this.getList();
              })
              .finally(() => {
                this.$endLoading();
              });
          } else {
            http
              .addList(params)
              .then(() => {
                this.$modal.msgSuccess("新增成功");
                this.showModal = false;
                this.MixinSearchList();
              })
              .finally(() => {
                this.$endLoading();
              });
          }
        } else {
          this.$nextTick(() => {
            this.$utils.scrollIntoView();
          });
        }
      });
    },
    // 提交 前端上传文件提交
    // addFrom() {
    //   this.$refs["formData"].validate(async (valid) => {
    //     if (valid) {
    //       this.$startLoading();
    //       let formData = {
    //         ...this.formData,
    //         fileIds: [],
    //       };
    //       // 上传文件
    //       if (this.formData.fileIds && this.formData.fileIds.length) {
    //         for (let key = 0; key < this.formData.fileIds.length; key++) {
    //           if (this.formData.fileIds[key].raw) {
    //             let { result } = await this.$http.upload(
    //               this.formData.fileIds[key].raw,
    //               this.$store.getters.userInfo.id
    //             );
    //             formData.fileIds.push(result.id);
    //           } else {
    //             // 修改时 后台需要全部id开启,不需要注掉
    //             formData.fileIds.push(this.formData.fileIds[key].id);
    //           }
    //         }
    //       }
    //       if (this.formData.id != undefined) {
    //         await http
    //           .updateList(formData)
    //           .then((response) => {
    //             this.$modal.msgSuccess("修改成功");
    //             this.showModal = false;
    //             this.getList();
    //           })
    //           .finally(() => {
    //             this.$endLoading();
    //           });
    //       } else {
    //         await http
    //           .addList(formData)
    //           .then((response) => {
    //             this.$modal.msgSuccess("新增成功");
    //             this.showModal = false;
    //             this.MixinSearchList();
    //           })
    //           .finally(() => {
    //             this.$endLoading();
    //           });
    //       }
    //     } else {
    //       this.$nextTick(() => {
    //         this.$utils.scrollIntoView();
    //       });
    //     }
    //   });
    // },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$modal
        .confirm("是否确认删除数据项？")
        .then(() => {
          this.$startLoading();
          return http.deleteList({ ids: [row.id] });
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .finally(() => {
          this.$endLoading();
        });
    },
    // 多选框 table
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
    },
    // 删除勾选
    handleAllDelete() {
      if (!this.ids.length) return this.$modal.msg("请勾选表格");
      this.$modal
        .confirm("是否确认删除数据项？")
        .then(() => {
          this.$startLoading();
          return http.deleteList({ ids: this.ids });
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .finally(() => {
          this.$endLoading();
        });
    },
    // 导出
    exportFile() {
      let params = {
        ...this.queryParams,
        ctimeBegin:
          this.queryParams.ctimeBegin && this.queryParams.ctimeBegin[0],
        ctimeEnd: this.queryParams.ctimeBegin && this.queryParams.ctimeBegin[1],
      };
      http.exportFile(params, "下载文件.xls");
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
